<template>
	<view class="detail-main">
		<view class="box">
			<view class="part">
				<view class="txt">编号：</view>
				<input class="input" type="text" v-model="customer.cid" />
			</view>
			<view class="part">
				<view class="txt">姓名：</view>
				<input class="input" type="text" v-model="customer.cname" />
			</view>
			<view class="part">
				<view class="txt">性别：</view>
				<radio-group class="radiogroup">
					<view>
						<radio class="radio" :checked="customer.man" @tap="manclick">男</radio>
						<radio class="radio" :checked="customer.woman" @tap="womanclick">女</radio>
					</view>

				</radio-group>

			</view>
			<view class="part">
				<view class="txt">电话：</view>
				<input class="input" type="text" v-model="customer.cphone" />
			</view>
			<view class="part">
				<view class="txt">地址：</view>
				<input class="input" type="text" v-model="customer.caddress" />
			</view>
			<view class="part">
				<view class="txt">年龄：</view>
				<input class="input" type="text" v-model="customer.cage" />
			</view>
			
			<view class="imgviewclass">
				照片：点击添加
			</view>
			<view class="imgview2">
				<image class="imgclass" mode="aspectFit" :src="customer.cpic" @tap="imgclick"></image>
			</view>

			<view class="part1">
			</view>
			<button type="primary" @tap="saveclick">保存</button>
		</view>


	</view>
</template>

<script>
	var kzm='';
	export default {

		props: {
			customer: Object
		},
		data(){
			return{
				imgsrc:"../../static/photo177.png"
			}
		},
		methods: {
			imgclick(){
				var _this = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						_this.imgsrc =res.tempFilePaths[0]; 
						_this.customer.cpic = res.tempFilePaths[0]; 
						var kzmindex = _this.imgsrc.lastIndexOf('.');
						kzm = _this.imgsrc.substr(kzmindex+1);
						uni.uploadFile({
							url: _this.url+'customer/uploadimg', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'fname':_this.customer.cid +'.'+kzm,
								'fcid':_this.customer.cid
							},
							success: (uploadFileRes) => {
								
							}
						});
						
				    }
				});
				
			},
			
			manclick() {
				this.customer.csex = 1;
			},
			womanclick() {
				this.customer.csex = 0;
			},
			saveclick() {
				var s = '';
				if (this.customer.type == '新增') {
					s = 'addcustomer';
				} else {
					s = 'updatetable';
				}

				uni.request({
					url: this.url + 'customer/' + s,
					method: 'GET',
					data: {
						cid: this.customer.cid,
						cname: this.customer.cname,
						csex: this.customer.csex,
						cphone: this.customer.cphone,
						caddress: this.customer.caddress,
						cage: this.customer.cage,
						cpic:this.customer.cid+'.'+kzm
					},
					success: res => {
						if (res.data.data == true) {
							uni.showToast({
								title: '更新成功！',
								icon: 'success'
							});

						}
						if (res.data.data >'0') {
							uni.showToast({
								title: '新增成功！',
								icon: 'success'
							});
						
						}
						
					},
					fail: () => {},
					complete: () => {}
				});

			}


		}
	}
</script>

<style>
	.imgview2{
		display: flex;
		justify-content: center;
	}
	.imgclass{
		border: 1px solid #CCCCCC;
		width: 300px;
		height: 200px;
		border-radius: 10px;
		
	}
	.imgviewclass{
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.radiogroup {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.radio {
		width: 100rpx;
	}

	.input {
		width: 80%;
		font-size: large;
		height: 100%;

	}

	.txt {
		font-size: large;
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.part {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 50px;
		border-bottom: #C0C0C0 1px solid;
	}

	.part1 {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 50px;
	}

	.box {
		width: 90%;
		height: 200px;

	}

	.detail-main {
		display: flex;
		justify-content: center;
		width: 100%;
	}
</style>
